@import "lib";

@header_height: 3em;
@footer_height: 2em;
@menu_width: 25em;

html,body {
  width:100%;
  height:100%;
  overflow-y:hidden;
}

a,a:visited {
  text-decoration:underline;
}

body {
  font-family:sans-serif;
  width: 100%;
  height: 100%;
  margin:0;
  padding:0;
  font-size:12px;
}
input,select,button,textarea {
  font-family:sans-serif;
  font-size:100%;
}
input[type=text],input[type=number] {
  .border-radius(3px);
  border:1px solid #333;
  background-color:#FFF;
  .v-gradient(#DDD,0%,#FFF,80%);
  padding:0.2em 0.5em;
}
button,.button {
  .border-radius (5px);
  .v-gradient (#BBB, 0%, #666, 100%);
  background-color:#333;
  color:#fff !important;
  text-decoration:none;
  padding:0.25em 0.5em;
  margin:0;
  border:1px solid #000;
  display:inline-block;
  .text-shadow(-1px -1px 1px #666);
}
a:hover {
  border-bottom:none;
}

.loading {
  background-image:url('../images/loader.gif');
  background-repeat:no-repeat;
  background-position: center center;
  min-height:60px;
}

#header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:@header_height - 1em;
  background: #CCC;
  z-index:1000;
  .box-shadow(0 0 10px rgba(0,0,0,0.25));
  padding:0.5em 1em;
  .v-gradient(#AAA,0%,#666,100%);
  color:#FFF;
  .text-shadow(-1px -1px 1px #666);
  vertical-align:middle;
  
  h1 {
    font-size:180%;
    line-height:100%;
    float:left;
  }

  #search {
    float:right;
    font-size:120%;
    line-height:100%;
    vertical-align:middle;
    
    label {
      margin-right:1em;
    }
    input {
      width:10em;
      margin-right:1em;
      vertical-align:middle;
    }
    button {
      vertical-align:middle;
    }
  }
}

#search-results {
  position:fixed;
  top:@header_height;
  right:2em;
  width:15em;
  max-height:80%;
  overflow:auto;
  background:#fff;
  .border-radius (5px);
  .box-shadow (0 0 10px #ccc);
  z-index:1001;

  ul {
    list-style-type:none;
    padding:0;
    margin:0;

    li {
      text-indent:0;
      background:#FFF;
      padding:0.25em;
      margin:0;
      border:1px solid #CCC;
      z-index:1;

      &.heading {
        font-weight: bold;
        text-transform: uppercase;
      }
    }
  }

  a.close {
    padding:0.2em;
    background:#DDD;
    .border-radius (5px);
    text-decoration:none;
    position:absolute;
    top:0;
    right:0;
    z-index:2;
    font-weight:bold;
    color:#CC0000;
  }
}

#content {
  position:fixed;
  top:@header_height;
  bottom:@footer_height;
  left:0;
  right:0;
  z-index:1;
  
  .scroll-content {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    padding:2em;
    overflow:auto;
  }
}

#map {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:@menu_width;
  border:1px solid #000;

  img {
      max-width:1000%;
  }
}

#routes {
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  padding:1em 2px 2px 1em;
  width:@menu_width - 1em;
  background-color:#333;
  .h-gradient(#999,0%,#333,1em);
  .box-shadow(0 0 10px rgba(0,0,0,0.25));
  border-left:1px solid #000;
    
  a.add-route, a.edit-route {
    .border-radius (5px);
    .v-gradient (#BBB, 0%, #666, 100%);
    background-color:#333;
    color:#fff;
    text-decoration:none;
    padding:0.25em 0.5em;
    margin:0;
    border:1px solid #000;
    display:inline-block;
    .text-shadow(-1px -1px 1px #666);
  }
  
  #routes-select {
    padding:0.25em;
    font-size:100%;
    margin:0 0 0 1em;
    width:@menu_width - 16em;
    
    option {
      margin:0.25em;
    }
  }
  
  #routes-waypoints {
    .border-radius (5px);
    background-color:#DDD;
    .v-gradient(#EEE,0%,#DDD,100%);
    .box-shadow(inset 0 0 5px #AAA);
    color:#FFF;
    position:absolute;
    top:4em;
    left:1em;
    right:1em;
    bottom:1em;
    overflow:auto;
    border:1px solid #000;
    
    ul.waypoints {
      list-style-type:none;
      text-indent:0;
      margin:0;
      padding:0.5em;
      display:none;
      
      &.active {
        display:block;
      }
      
      li {
        list-style-type:none;
        margin:0 0 0.5em 0;
        padding:0.5em;
        .border-radius (5px);
        background-color:#666;
        .v-gradient(#333,0%,#666,100%);
        display:block;
        border:1px solid #000;
        
        &.waypoint {
          clear:both;
          padding-bottom:2em;
          cursor:move;
          
          .details-toggle {
            display:block;
          }
          
          .details {
            display:none;
          }
          
          a.remove {
            float:right;
          }
        }
        
        a {
          color:#FFF;
          text-decoration:underline;          
        }
        .waypoint-icon {
          text-decoration:none;
        }
        
        &.airport {
          @color: desaturate(#0000FF,60%);
          background-color:darken(@color,25%);
          .v-gradient(darken(@color,10%),0%,darken(@color,20%),100%);
        }
        &.navaid {
          @color: desaturate(#00FF00,60%);
          background-color:darken(@color,25%);
          .v-gradient(darken(@color,10%),0%,darken(@color,20%),100%);
        }
        &.fix {
          @color: desaturate(#FF0000,60%);
          background-color:darken(@color,25%);
          .v-gradient(darken(@color,10%),0%,darken(@color,20%),100%);
        }
        &.gps {
          @color: desaturate(#FF00FF,60%);
          background-color:darken(@color,25%);
          .v-gradient(darken(@color,10%),0%,darken(@color,20%),100%);
        }
        
        h4 {
          margin:0 0 0.5em 0;
          
          img {
            display:inline;
            margin:0 0.5em 0 0;
            padding:2px;
            vertical-align:middle;
            background:fade(#FFF,50%);
            .border-radius(3px);
          }
        }
      }
    }
  }
}
#footer {
  height:@footer_height - 0.5em;
  position:fixed;
  left:0;
  bottom:0;
  right:0;
  background-color: #666;
  .v-gradient(#999,0%,#333,100%);
  padding:0.5em 1em 0 1em;
  color:#FFF;
  line-height:100%;
  .text-shadow(-1px -1px 1px #666);
  z-index:1000;
  .box-shadow(0 0 10px rgba(0,0,0,0.25));
}


/* OpenLayers */

.olPopup h2 {
  font-size:120%;
  
  img {
    display:inline;
    margin:0 0.5em 0 0;
    padding:0;
    vertical-align:bottom;
  }
}


/* jQuery UI */
.ui-dialog {
  .box-shadow(0 0 10px rgba(0,0,0,0.5));
}

.ui-button {
  .text-shadow(none);
  color:#1C94C4 !important;
}
#route-color,.route-color {
  display:inline-block;
  width:2em;
  height:1em;
  border:1px solid #000;
  .border-radius(3px);
}
#route-color {
  margin:0 0.25em;
  height:2.2em;
  vertical-align:middle;
}

.route-edit {
  line-height:200%;
  label {
    width:40%;
    display:inline-block;
    padding:0;
    margin-right:5%;
  }
  input[type=text] {
    width:40%;
  }
  input[type=number] {
    width:4em;
  }
  .route-color {
    margin-right:1em;
  }
  .remove-route {
    float:right;
    text-decoration:underline;
  }
}

.fse-jobs-table {
  thead th {
    border-bottom:1px solid #000;
  }
  tbody td {
    border:1px solid #666;
    padding:0.25em;
    background:#FFF;
  }
}

.fse-taskbar {
  position:absolute;
  z-index:900;
  bottom:@footer_height;
  left:0;
  list-style-type:none;
  margin:0;
  padding:0;
  background:rgba(0,0,0,0.5);
  .box-shadow(0 0 5px rgba(0,0,0,0.5));
  
  &:after {
    .clearfix();
  }
  
  .task {
    float:left;
    margin:0;
    padding:0;
    
    a {
      padding:0.25em 1em;
      border:1px solid #666;
      background:#AAA;
      .v-gradient(#CCC,0%,#AAA,100%);
      .border-radius(5px 5px 0 0);
      color:#000;
      text-decoration:none;
      display:block;
    }
  }
  
}

.follow-aircraft-label {
  margin-left:1em;
}